<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQT.Floaty</title>
        <style type="text/css" media="screen">@import "../../themes/css/apple.css";</style>

        <script src="../../jqtouch/zepto/dist/zepto.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jqtouch/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../extensions/jqt.floaty.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black',
                slideSelector: '.slide'
            });

            $(function(){
                
                $('#togglefloaty').click(function(){
                    $('.floaty').toggleFloaty();
                    $(this).removeClass('active');
                    return false;
                });

                $('#hidefloaty').click(function(){
                    $('.floaty').hideFloaty();
                    $(this).removeClass('active');
                    return false;
                });
                
                $('.floaty').makeFloaty({
                    spacing: 20,
                    time: '1s'
                });

            });
        </script>
        <style type="text/css" media="screen">
            div#jqt .floaty {
                -webkit-border-radius: 10px;
                -webkit-box-shadow: rgba(0,0,0, .5) 0px 1px 1px;
                width: 90%;
                margin: 0 5%;
                padding: 5px 10px;
                background: rgba(255,255,255,.7);
                color: #000;
                z-index:20;
            }
        </style>
    </head>
    <body>
        <div id="jqt">
            <div id="test">
                <ul class="edgetoedge">
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                    <li>Dummy Data</li>
                </ul>
                <ul class="individual">
                    <li><a href="#" id="hidefloaty">Hide Floaty</a></li>
                    <li><a href="#" id="togglefloaty">Toggle Floaty</a></li>
                </ul>
            </div>
            <div id="page2">
                <div style="font-size: 1.5em; text-align: center; margin: 160px 0 160px; font-family: Marker felt;">
                    Pretty smooth, eh?            
                </div>
                <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="whiteButton goback">Go back</a>
            </div>
            <div class="floaty">
                I&#8217;m the Floaty bar!<br />
                Testing multiple lines<br />
                Should be flexible.
            </div>
        </div>
    </body>
</html>